<template>
    <div v-if="storeInfo" class="store-pay-wrap">
        <van-nav-bar title="在线买单" left-arrow fixed @click-left="onClickLeft" />

        <div class="store-name">
            买单店铺：{{ storeInfo.name }}
        </div>
        <div class="store-addresss">
            店铺地址：{{ storeInfo.region_name }}
        </div>

        <div class="store-input">买单金额：</div>
        <!-- <div class="input-boxs">
            <van-field v-model="type_name" placeholder="请选择" input-align="center" is-link readonly
                @click="showPicker = true" />
        </div> -->
        <div class="input-box-hd" v-if="type==1">
            <van-field v-model="moneyInput" type="number" placeholder="请输入现金金额" @input="amountInput" />
            <img src="../../images/jia.png" alt="">
            <van-field v-model="integral" type="number" placeholder="请输入花朵金额" @input="amountInput" />
            <div class="amt">当前花朵余额:{{ userInfo.integral || 0 }}</div>
        </div>
        <div class="input-box" v-if="type == 0">
            <van-field v-model="moneyInput" type="number" placeholder="请输入支付金额" @input="amountInput" />
        </div>
        <div class="youhui_title" @click="getCoupon" v-if="false">
            <van-cell title="现金消费券" :value="coupon_deduction" is-link error>
                <template #icon>
                    <img class="youhui_icon" src="../../images/mine/youhui_icon.png" />
                </template>
            </van-cell>
        </div>
        <div class="youhui_title" v-if="userInfo.balance_xfj > 0">
            <van-cell :title="'消费金余额:'+userInfo.balance_xfj" error
                :style="{ border: checked ? '.01rem solid rgba(243,42,35,0.6)' : '.01rem solid #fff', }">
                <template #icon>
                    <img class="youhui_icon" src="../../images/mine/youhui_icon.png" />
                </template>
                <template #right-icon>
                    <van-checkbox style="margin-left: .2rem;" v-model="checked" icon-size=".3rem"
                        checked-color="#60c60f"></van-checkbox>
                </template>
            </van-cell>
        </div>
        <div class="active-btn pay-btn" @click="storeSubmit">确定</div>
        <van-popup v-model="showPicker" position="bottom">
            <van-picker title="选择支付方式" value-key="text" show-toolbar :columns="columnsConfig" @confirm="onConfirm"
                @cancel="showPicker = false" :value="cascaderValue" />
        </van-popup>
    </div>
</template>

<script>
import { STORE_INFO, STORE_ORDER_ONLINE_TRADE, STORE_CONSUME_LIST } from '@/api/store';
import {
    USERDETAIL
} from "@/api/mine";
export default {
    data() {
        return {
            storeInfo: null,
            moneyInput: '',
            coupon_deduction: '',
            integral:'',
            params: localStorage.getItem("coupon") == null ? null : JSON.parse(localStorage.getItem("coupon")),
            coupon_id: this.$route.query.coupon_id,
            checked: false,
            consume_gold: '',
            userInfo: {},
            type: 0,
            type_name: '现金',
            showPicker: false,
            cascaderValue: '',
            columnsConfig: [
                {
                    text: '现金',
                    value: 0
                },
                //  {
                //     text: '现金+花朵',
                //     value: 1
                // }
            ]
        }
    },
    created() {
        if (this.params == null) {
            this.moneyInput = ''
            this.coupon_deduction = ''
        } else {
            this.moneyInput = this.params == null ? '' : this.params.moneyInput
            if (this.coupon_id) {
                if (Number(this.moneyInput) <= Number(this.params.surplus_amount)) {
                    this.coupon_deduction = this.params == null ? '' : '本次可抵扣¥' + this.moneyInput || 0
                } else {
                    this.coupon_deduction = this.params == null ? '' : '本次可抵扣¥' + this.params.surplus_amount || 0
                }
            } else {
                this.coupon_deduction = '本次可抵扣¥0'
            }

        }
        localStorage.removeItem('coupon_items')
        this.getStoreData();
        this.getUserInfo()
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        onConfirm(value) {
            this.type = value.value
            this.type_name = value.text
            this.showPicker = false
        },
        amountInput(val) {
            this.coupon_deduction = ''
            this.coupon_id = ''
        },
        getUserInfo() {
            this.$http.get(USERDETAIL).then((res) => {
                this.userInfo = res.data;
            });
        },
        getStoreData() {
            this.$http.post(STORE_INFO, {
                id: this.$route.query.store_id,
            })
                .then(res => {
                    const {
                        data
                    } = res;

                    this.storeInfo = data;
                })

        },

        // 优惠券
        getCoupon() {
            if (!this.moneyInput) {
                this.$toast('请输入支付金额');
                return;
            }
            this.$http.post(STORE_CONSUME_LIST, {
                store_id: Number(this.$route.query.store_id),
                amount: this.moneyInput,
            })
                .then(res => {
                    localStorage.setItem("coupon_items", JSON.stringify(res.data))
                    this.$router.replace({
                        path: '/coupon',
                        query: {
                            coupon_id: this.coupon_id,
                            store_id: this.$route.query.store_id,
                            moneyInput: this.moneyInput
                        }
                    })
                })

        },
        // 在线买单
        storeSubmit() {
            if (!this.moneyInput) {
                this.$toast('请输入支付金额');
                return;
            }
            this.$http.post(STORE_ORDER_ONLINE_TRADE, {
                store_id: this.$route.query.store_id,
                amount: this.moneyInput,
                coupon_id: Number(this.coupon_id),
                use_consume_gold: this.checked ? 1 : 0,
                integral:this.integral,
                type:this.type
            })
                .then(res => {
                    // 截止时间
                    res.data.expired_time = new Date().getTime() + res.data.expired_seconds * 1000;
                    res.data.msg = 1
                    localStorage.setItem('cashOrder', JSON.stringify(res.data))

                    // 去收银台
                    this.$router.replace({
                        name: 'levelCashier',
                        quer: {
                            store: 1
                        }
                    })
                    localStorage.removeItem('coupon')
                })

        }
    }
}

</script>
<style lang="scss">
.store-pay-wrap {
    min-height: 100vh;
    padding-top: 46px;
    background-color: #f5f5f5;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
    background: #ffffff;

    .van-nav-bar .van-icon {
        color: #333333;
    }

    .van-nav-bar__arrow {
        font-size: 20px;
    }

    .van-hairline--bottom::after {
        display: none;
    }

    .store-name {
        margin-bottom: 0.2rem;
        font-weight: 500;
        font-size: 0.36rem;
        margin-top: 0.48rem;
        padding: 0 0.32rem;
        color: #333333;
    }

    .store-addresss {
        margin-bottom: 0.52rem;
        padding: 0 0.32rem;
        line-height: 0.4rem;
        font-weight: 400;
        font-size: 0.28rem;
        color: #666666;
    }

    .store-input {
        margin-bottom: 0.16rem;
        padding: 0 0.32rem;
        line-height: 0.4rem;
        font-weight: 400;
        font-size: 0.28rem;
        color: #333333;
    }

    .input-box {
        width: 6.86rem;
        height: 0.94rem;
        margin: auto;

        .van-cell {
            border-radius: 0.16rem;
            background: #F2F4F5;
        }
    }

    .input-boxs {
        width: 6.86rem;
        height: 0.94rem;
        margin: auto;
        margin-bottom: .2rem;

        .van-cell {
            border-radius: 0.16rem;
            background: #fff;
            border: 2px solid #F2F4F5;

        }
    }

    .input-box-hd {
        width: 92%;
        margin: 0 auto;
        margin-bottom: .5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;

        .van-cell {
            border-radius: 0.16rem;
            background: #F2F4F5;
            width: 45%;
        }

        img {
            width: 5%;
        }

        .amt {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: .24rem;
            color: #666666;
            position: absolute;
            bottom: -.5rem;
            right: 0;
        }
    }

    .pay-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 6.06rem;
        height: 0.88rem;
        margin: auto;
        margin-top: 1.2rem;
        font-weight: 500;
        font-size: 0.32rem;
        color: #ffffff;
        border-radius: 0.44rem;
        background: linear-gradient( 270deg, #1261E2 0%, #4A89EC 100%);
    }

    .youhui_title {
        margin: .2rem;
        
        .van-cell {
            border-radius: .1rem;
            border: .01rem solid #ffffff;
        }

        .van-cell__value {
            color: #F32A23;
        }

        .youhui_icon {
            width: .6rem;
            height: .6rem;
            vertical-align: middle;
            margin-top: -.1rem;
            margin-right: .2rem;
        }
    }
}
</style>